<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>	
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<base href="<%=basePath%>"/>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title>获取页面提交的参数</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<script language="JavaScript" src="js/jquery.js"></script>
	<style type="text/css">
		select {
			width: 170px;
			height: 28px;
			border-color: #e6e6e6;
			cursor: pointer;
    		border: solid 1px #e6e6e6;
   			appearance:none;
    		-moz-appearance:none;
    		-webkit-appearance:none;
    		padding-right: 14px;
    		background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll        right center transparent;
  			 /* background:white\9\0;*/
		}


		select::-ms-expand {
     		display: none;
    		background: none;

		}  /*去除ie浏览器默认的select样式*/
		select[name="department"]{
			height: 128px;
		}
	</style>
	
</head>
<body>
	<div class="formbody">
		<div class="formtitle">
			<span>获取页面提交的参数</span>
		</div>
		<form action="SelectServlet?option=1" method="post">
			<ul class="forminfo">
				<li>
					<label>学院</label>
					<select name="college" url="<%=basePath%>SelectServlet?option=2" id="college">
					    <option value="" <c:if test="${cs==''}">selected="selected"</c:if>>---请选择学院---</option>
						<!—判断是否默认选中-->
						<option value="01" <c:if test="${cs=='01'}">selected="selected"</c:if>>文传学院</option>
						<option value="02" <c:if test="${cs=='02'}">selected="selected"</c:if>>智能学院</option>
						<option value="03" <c:if test="${cs=='03'}">selected="selected"</c:if>>理学院</option>
						<option value="04" <c:if test="${cs=='04'}">selected="selected"</c:if>>化环学院</option>
						<option value="05" <c:if test="${cs=='05'}">selected="selected"</c:if>>医学院</option>
					</select>
				</li>
				<li>
					<label>系部</label>
					<select name="department" id="department" multiple="multiple"  size=”3”>
					    <c:forEach items="${departmentList}" var="d" varStatus="vs">
							<option value="${d.code}">${d.name}</option>
						</c:forEach>
					</select>
				</li>
				<c:forEach items="${selected}" var="s" varStatus="vs">
						<li>
							${s}
						</li>
				</c:forEach>
				
				<li style="margin-right:auto;">
					<input style="align-items: flex-end;" type="submit" name="save" value="保存" class="btn" >
				</li>
			</ul>
		</form>
	</div>
<script type="text/javascript">
$(document).ready(function(){
	$("#college").change(function(){
		$url = $("#college").attr("url");
		$college = $("#college").val();
		$url = $url + "&colloge="+$college;
		console.log($url);
		$.ajax({
			type:"post",
			url:$url,
			data:$("form").serializeArray(),
			success:function(msg){
				console.log(msg);
				$result = $.parseJSON(msg);
				console.log($result);
				$("#department").empty();
				$.each($result.object,function(index,d){
					$option = $("<option value="+d.code+">"+d.name+"</option>");
					$("#department").append($option);
				})
			}
		});
	});
	
});
</script>
</body>
</html>
